<template>
  <div>
    <el-table :data="configList" stripe>
      <el-table-column prop="title" label="尺寸名称" width="200"></el-table-column>
      <el-table-column prop="sizeName" label="尺寸编码" width="200"></el-table-column>
      <el-table-column prop="compressionRate" label="压缩率">
        <template slot-scope="scope">
          <el-input v-model="scope.row.compressionRate" type="number"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px;">
      <el-button type="primary" @click="saveAllConfigs">保存配置</el-button>
    </div>
  </div>
</template>

<script>
import {getImageSizeConfigList, updateImageSizeConfig} from "@/api/imgManage/appManage";

export default {
  data() {
    return {
      configList: []
    };
  },
  mounted() {
    this.fetchConfigList();
  },
  methods: {
    fetchConfigList() {
      getImageSizeConfigList().then(response => {
          this.configList = response.data;
        })
        .catch(error => {
          console.error('获取配置列表失败:', error);
        });
    },
    saveAllConfigs() {
      updateImageSizeConfig(this.configList)
        .then(() => {
          this.$message.success('所有配置保存成功');
        })
        .catch(error => {
          console.error('保存所有配置失败:', error);
          this.$message.error('所有配置保存失败');
        });
    }
  }
};
</script>

<style scoped>

</style>
